07. Exercise: Creating and Adding a Fragment

L3 07 Steps - Creating And Adding A Fragment SC

Note:
At timestamp 00:22 in the video above, for Android Studio 4.0+ version, it will not show you the checkboxes to create Layout XML, include fragment factory methods, and include interface callbacks.

Now it’s your turn to complete this exercise yourself.

1. Download the starter code if you haven't already.

Instructions are in the previous exercise.

2. Create a fragment file.

Make sure a file is selected in the project first.

  • Select File->New->Fragment->Fragment (Blank).
  • For fragment name, use TitleFragment
  • For the Fragment layout name, enter placeholder_layout (we will not use this layout for our app as it already has the layout designed for TitleFragment).
  • For source language, select Kotlin.
  • Click Finish.

3. Cleanup the new TitleFragment class.

Open up the new TitleFragment. It contains the onCreateView() method, which is one of the methods that's called during a Fragment's lifecycle. Begin by deleting the four lines under the import statements, from the // TODO. Rename parameter arguments, choose names that match, down to the ARG_PARAM2 declaration. Then remove the return TextView(activity).apply section along with the SetText. The fragment won’t compile now because we have just removed the code that was returning the Fragment View or ViewGroup.

4. Inflate and return the fragment layout.

In our Activity, we used DataBindingUtil.setContentView to get the binding class from a layout, but since we’re in a fragment we need to call DataBindingUtil.inflate in onCreateView with the provided layout inflater, the layout resource ID, the provided viewgroup it will be hosted by, and false to not attach it to the viewgroup. Return binding.root. The code should look like:

//Inflating and Returning the View with DataBindingUtil
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?): View? {
     val binding: FragmentTitleBinding = DataBindingUtil.inflate(
     inflater, R.layout.fragment_title, container, false)
     return binding.root
}

5. Add the fragment to the activity layout.

Open the activity_main.xml layout. Go to the LinearLayout and create a fragment tag inside of it. You need to give a fragment created in this way an id and set android:name to the full path of our fragment class. Then set the layout width and height to match_parent, and you’re done.

6. Run your app.

Launch the app and revel in the glory of your first fragment!

If you want to start at this step, you can download this exercise code from: Step.01-Exercise-Creating-and-Adding-a-Fragment.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here Step.01-Solution-Creating-and-Adding-a-Fragment or git diff.

Task Description:

Learn about Fragments by implementing the title screen of our trivia app. Check the steps below as you implement them to complete this exercise.

Task List:

Task Feedback:

That’s it! It’s time to navigate!

Solution: Step.01-Solution-Creating-and-Adding-a-Fragment or git diff

Next Concept